<template>
  <div class="home">
    <my-header :logo="logo"></my-header>
    <nav-bar></nav-bar>
    <div class="home-container" v-if="$route.name === 'home'">
      <banner
        :openTime="openTime"
        :queryTel="queryTel"
        :queryAddress="queryAddress"
        :bannerData="bannerData"
      ></banner>
      <dynamic :dynamicData="dynamicData"></dynamic>
      <service-channel :serviceData="serviceData"></service-channel>
      <archive-collection
        :preciousArchivesData="preciousArchivesData"
      ></archive-collection>
    </div>
    <div class="list-container" v-if="$route.name === 'list'">
      <list></list>
    </div>
    <div class="detail-container" v-if="$route.name === 'detail'">
      <detail :isCrumbs="true"></detail>
    </div>
    <my-footer
      :footerData="footerData"
      :weChatQrCode="weChatQrCode"
    ></my-footer>
    <div class="back-to-top" v-if="showTopButton" @click="scrollToTop">
      <i class="el-icon-arrow-up"></i>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import Header from "@/components/Header";
import NavBar from "@/components/NavBar";
import banner from "@/components/banner";
import dynamic from "@/components/dynamic";
import serviceChannel from "@/components/serviceChannel";
import archiveCollection from "@/components/archiveCollection";
import footer from "@/components/footer";
import list from "@/views/list";
import detail from "@/views/detail";
import request from "@/utils/request";
import {
  getToken,
  getConfigWeb,
  getSort,
  getArticle,
  getColumn,
} from "@/api/index";
export default {
  components: {
    myHeader: Header,
    NavBar,
    banner,
    dynamic,
    serviceChannel,
    archiveCollection,
    myFooter: footer,
    list,
    detail,
  },
  data() {
    return {
      showTopButton: false,
      logo: "",
      openTime: [],
      queryTel: "",
      queryAddress: "",
      footerData: [],
      weChatQrCode: "",
      dynamicData: [],
      serviceData: [],
      preciousArchivesData: [],
      bannerData: [],
    };
  },
  watch: {
    $route: {
      handler(to, from) {
        console.log("路由发生了变化");
        console.log("从:", from);
        console.log("到:", to);
        // 根据路由变化进行操作
        // 重新加载页面
        location.reload();
      },
      deep: true,
    },
  },
  async created() {
    this.getData();
    await getToken().then((res) => {
      request.defaults.headers.Authorization = res.data.access_token;
    });
    this.getConfigWeb();
    getArticle({
      itemId: 4,
      page: 1,
      limit: 20,
    });
    getColumn({
      type: 4,
    });
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getConfigWeb() {
      getConfigWeb().then((res) => {
        res.data[
          res.data.findIndex((item) => item.configName === "档案馆")
        ]?.dataList.forEach((listItem) => {
          if (listItem.code.includes("open_time")) {
            this.openTime.push(listItem);
          } else if (listItem.code === "logo") {
            this.logo = listItem.value;
          } else if (listItem.code === "query_tel") {
            this.queryTel = listItem.value;
          } else if (listItem.code === "query_address") {
            this.queryAddress = listItem.value;
          } else if (listItem.code.includes("footer")) {
            this.footerData.push(listItem);
          } else if (listItem.code === "weChat_qr_code") {
            this.weChatQrCode = listItem.value;
          }
        });
      });
    },
    async getData() {
      await getSort({ itemId: 4, page: 1, limit: 9999 }).then((res) => {
        res.data.forEach((item) => {
          if (["工作动态", "党建活动", "通知公告"].includes(item.article)) {
            this.dynamicData.push(item);
          }
          if (item.article === "服务通道") {
            this.serviceData = item.children;
          }
          if (item.article === "珍档荟萃") {
            this.preciousArchivesData = item.children;
          }
          if (item.article === "轮播图") {
            this.bannerData = item.children;
          }
        });
      });
    },
    handleScroll() {
      this.showTopButton =
        document.body.scrollTop > 200 ||
        document.documentElement.scrollTop > 200;
    },
    scrollToTop() {
      const currentScroll =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (currentScroll > 0) {
        window.requestAnimationFrame(this.scrollToTop);
        window.scrollTo(0, currentScroll - currentScroll / 8);
      }
    },
  },
};
</script>
<style>
.mask {
  overflow: hidden;
}
</style>

<style lang="scss" scoped>
.home {
  min-width: 1800px;
  .back-to-top {
    position: fixed;
    bottom: 100px;
    right: 150px;
    width: 50px;
    height: 50px;
    background-color: #656565;
    color: #fff;
    text-align: center;
    line-height: 50px;
    // border-radius: 50%;
    cursor: pointer;
    z-index: 999;
    font-size: 26px;
    opacity: 0.5;
    &:hover {
      opacity: 1;
    }
  }
}
</style>
